var bgimg="";
var imgpath = "../images/backimage/";
$(function() {
	$("#text-padding").change(function() {
		var pad = $(this).val();
		$("#box_exzample").css("padding", pad + "px");
	});
	$("#back-color").change(function() {
		var backcolor = $(this).val();
		$("#box_exzample").css("background-color", backcolor);
	});
	$("#select-clip").change(function() {
		var clip = $(this).find("option:selected").text();
		$("#box_exzample").css("background-clip", clip);
	});
	$("#select-origin").change(function() {
		var origin = $(this).find("option:selected").text();
		$("#box_exzample").css("background-origin", origin);
	});
	$("#select-size").change(function() {
		var size = $(this).find("option:selected").text();
		$("#box_exzample").css("background-size", size);
	});


	$('input:radio[name="bg_img"]').click(function() {		
		var selnum = parseInt($('input:radio[name="bg_img"]:checked').val());
		$("#box_exzample").css("color", "#fff");
		switch (selnum) {
			case 1:
                bgimg=imgpath + "bg_b1.jpg";				
				break;
			case 2:
                bgimg=imgpath + "bg_b2.jpg";				
				break;
			case 3:
                bgimg=imgpath + "bg_b3.jpg";				
				break;
			case 4:
                bgimg=imgpath + "bg_b4.jpg";					
				break;
			case 5:
                bgimg=imgpath + "b5.png";						
				break;
		}
		$("#box_exzample").css("background-image", "url(" + bgimg+")");		
	})

	$("#select-repeat").change(function() {
		var repeat = $(this).find("option:selected").text();
		$("#box_exzample").css("background-repeat", repeat);
	});
	$("#select-attachment").change(function() {
		var attachment = $(this).find("option:selected").text();
		$("#box_exzample").css("background-attachment", attachment);
	});

	// repeater
	$("#back-position-x").change(function() {
		var site = $('input.position:radio:checked').val();
		var posx = $(this).val();
		var posy = $("#back-position-y").val();
		setbackposition(site, posx, posy)

	});

	$("#back-position-y").change(function() {
		var site = $('input.position:radio:checked').val();
		var posy = $(this).val();
		var posx = $("#back-position-x").val();
		setbackposition(site, posx, posy)
	});

	function setbackposition(fh, posx, posy) {
		if (posx != "" && posy != "") {
			$("#box_exzample").css({
				"background-position-x": posx + fh,
				"background-position-y": posy + fh
			});
		} else {
			var pos = posx | posy;
			$("#box_exzample").css({
				"background-position-x": pos + fh,
				"background-position-y": pos + fh
			});
		}

	}
	// var test = document.getElementById('file-multiple-input');
	// test.addEventListener('change', function() {
	// 	var t_files = this.files;

	// 	var str = '';
	// 	for (var i = 0, len = t_files.length; i < len; i++) {
	// 		if (i < len - 1) {
	// 			str += "url(images/backimage/" + t_files[i].name + ")" + ",";
	// 		} else {
	// 			str += "url(images/backimage/" + t_files[i].name + ")";
	// 		}
	// 	};
	// 	$("#box_exzample").css("background-image", str);
	// }, false);
	
})
var img_small1 = document.getElementById('bg_img_small1');
img_small1.addEventListener('change',function(){	
	if(img_small1.checked&&bgimg!="")
	{		
		var json=getmulimgset();
	    $("#box_exzample").css(json);
	 
	 }
	 else
	 {
		 var repeat1 = $("#select-repeat").find("option:selected").text();
		if(repeat1=="Please select")
		{
			repeat1="repeat"
		}
		 var posx = $("#back-position-x").val();
		 var posy = $("#back-position-y").val();
		
		 var json={"background-image": "url("+bgimg+")","background-repeat":repeat1,"background-position":posx+"px"+ posy+"px"}
		 
		 
		  $("#box_exzample").css(json);
	 }
})

function getmulimgset()
{
	var bgimg2=imgpath + "b5.png";
	var imgs="url(" + bgimg2 + "),url("+bgimg+")";
	var repeat1 = $("#select-repeat").find("option:selected").text();
	var repeat2 = $("#select-repeat2").find("option:selected").text();
	if(repeat1=="Please select")
	{
		repeat1="repeat"
	}
	if(repeat2=="Please select")
	{
		repeat2="repeat"
	}
	var reps=repeat2+","+repeat1;
	var posx = $("#back-position-x").val();
	var posy = $("#back-position-y").val();
	var posx1 = $("#back-position-x1").val();
	var posy1 = $("#back-position-y1").val();
	var pos=posx1+"px "+ posy1+"px,"+ posx+"px "+ posy+"px";
	var json={"background-image":imgs,"background-repeat":reps,"background-position":pos };
	return json;
}
 
